<template>
    <div class="login">
        <el-container class="login-container">
            <el-header class="login-header">
                <div class="img">
                    <img src="/favicon.jpg" alt="">
                    <span>LS StoreDisk</span>

                </div>
            </el-header>
            <el-main class="login-main">
                <h1>login</h1>
                <!-- <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm"> -->
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon class="demo-ruleForm">
                    <el-form-item prop="username">
                        <el-input class="login-main-input" v-model="ruleForm.username" placeholder="请输入用户名" autocomplete="off" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input class="login-main-input" v-model="ruleForm.password" type="password" placeholder="请输入密码" autocomplete="off" />
                    </el-form-item>
                    <!-- 图片验证码 -->
                    <!-- <el-form-item prop="age">
                        <el-input class="login-main-input identifyCode" v-model.number="ruleForm.age" placeholder="请输入图片验证码" />
                        <div class="code" @click="refreshCode">
                            <SIdentify :identifyCode="identifyCode"></SIdentify>
                        </div>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button class="login-main-input" type="primary" @click="submitForm(ruleFormRef)" :disabled="isDisabled">login / register</el-button>
                    </el-form-item>
                    <el-checkbox v-model="checked1" ref="here">I have read and agree <a href="">LS StoreDisk</a>
                    </el-checkbox>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>


<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { reactive, ref, onMounted, watch } from 'vue'
import type { FormProps } from 'element-plus'
import router from '@/router'
import SIdentify from '@/components/Sidentify.vue'
import { tr } from 'element-plus/es/locale'
import { doLogin2 } from '../api/api'

const url = '@/assets/favicon.jpg'
const ruleFormRef = ref<FormInstance>()
const checked1 = ref(false)
let sidentifyMode = ref('') //输入框验证码
let identifyCode = ref('') //图形验证码
let identifyCodes = ref('1234567890abcdefjhijklimnopqrstuvwxyz') //验证码出现的数字和字母
const isDisabled = ref(true) //按钮
const ruleForm = reactive({
    username: '',
    password: '',
    verification: '1'
})

watch(() => ruleForm, (newValue, oldValue) => {
    if (newValue.username && newValue.password) {
        isDisabled.value = false
    }
}, { deep: true })
// //组件挂载
onMounted(() => {
    identifyCode.value = ''
    makeCode(identifyCodes.value, 4)
})
const submitForm = (formEl: FormInstance | undefined) => {
    console.log(ruleForm)
    doLogin2(ruleForm).then((res) => {
        localStorage.setItem("token", res.data.token)
        localStorage.setItem("loginInfo", res.data)
        router.push('/')
    }) 
}

// 生成随机数
const randomNum = (min, max) => {
    max = max + 1
    return Math.floor(Math.random() * (max - min) + min)
}
// 随机生成验证码字符串
const makeCode = (o, l) => {
    for (let i = 0; i < l; i++) {
        identifyCode.value += o[randomNum(0, o.length)]
    }
}
// 更新验证码
const refreshCode = () => {
    identifyCode.value = ''
    makeCode(identifyCodes.value, 4)
}

// const checkAge = (rule: any, value: any, callback: any) => {
//     if (!value) {
//         return callback(new Error(''))
//     }
//     setTimeout(() => {
//         if (!Number.isInteger(value)) {
//             callback(new Error('Please input digits'))
//         } else {
//             if (value < 18) {
//                 callback(new Error('Age must be greater than 18'))
//             } else {
//                 callback()
//             }
//         }
//     }, 1000)
// }

// const validatePass = (rule: any, value: any, callback: any) => {
//     if (value === '') {
//         callback(new Error('456'))
//     } else {
//         if (ruleForm.checkPass !== '') {
//             if (!ruleFormRef.value) return
//             ruleFormRef.value.validateField('checkPass', () => null)
//         }
//         callback()
//     }
// }
// const validatePass2 = (rule: any, value: any, callback: any) => {
//     if (value === '') {
//         callback(new Error('678'))
//     } else if (value !== ruleForm.pass) {
//         callback(new Error("Two inputs don't match!"))
//     } else {
//         callback()
//     }
// }

// const rules = reactive<FormRules<typeof ruleForm>>({
//     pass: [{ validator: validatePass, trigger: 'blur' }],
//     checkPass: [{ validator: validatePass2, trigger: 'blur' }],
//     age: [{ validator: checkAge, trigger: 'blur' }],
// })


</script>
<style lang="less">
.login {
    padding: 0;
    margin: 0;
    background: seashell;
    height: 100vh;
}
.login-container {
}
.login-header {
    img {
        width: 60px;
        height: 60px;
        vertical-align: middle;
    }
    span {
        display: inline-block;
        font-size: 20px;
        padding-left: 30px;
        padding-top: 20px;
    }
}
.login-main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: darkgray;
    text-align: center;
    h1 {
        padding: 0px 0px 20px 0px;
    }
}
.login-main-input {
    width: 400px;
    height: 50px;
    margin-top: 10px;
}
.identifyCode {
    margin-top: 0px;
    width: 280px;
    margin-right: 20px;
}
.login-footer {
    background: darkgray;
}
</style>
